<template>
	<a-flex vertical>
		<a-flex style="padding: 0.5rem 0;">
			<a-flex justify="start" align="center" style="width:70%;">
				<slot name="header"><XIcon icon="system-uicons:database" size="20" :color="$settingStore.iconColor"/></slot>
			</a-flex>
			<a-flex justify="end" align="center" style="width:30%;padding: 0 1rem;">
				<a-popover trigger="hover" >
					<template #content>
						表格斑马纹
					</template>
					<a-switch v-model:checked="data.striped" />
				</a-popover>
				<a-divider type="vertical" />
				<a-popover trigger="hover" >
					<template #content>
						表格密度
					</template>
					<a-dropdown>
						<XIcon icon="system-uicons:expand-height" size="20" :color="$settingStore.iconColor"/>
						<template #overlay>
							<a-menu v-model:selectedKeys="data.activeKey" @click="itemClick">
								<a-menu-item key="large">默认</a-menu-item>
								<a-menu-item key="middle">中等</a-menu-item>
								<a-menu-item key="small">紧凑</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</a-popover>
				<a-divider type="vertical" />
				<a-popover trigger="hover" >
					<template #content>
						数据展示配置	
					</template>
					<a-popover placement="bottom" trigger="click">
						<template #content>
							<a-checkbox-group v-model:value="data.checkList" @change="onChange">
								<a-space direction="vertical">
									<template v-for="item in props.columns" :key="item.key">
										<a-checkbox :value="item.key" >{{item.title}}</a-checkbox>
									</template>
								</a-space>
							</a-checkbox-group>
						</template>
						<XIcon icon="system-uicons:settings" :color="$settingStore.iconColor" size="20" />
					</a-popover>
				</a-popover>
			</a-flex>
		</a-flex>
		<a-flex >
			<a-table class="ant-table-striped" :size="data.tableSize" :columns="cColumns"  
				:data-source="props.dataGrid" 
				:pagination="cPagination" 
				:loading="props.loading" 
				bordered
				:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
				@update:page="onPageChange"
				@update:page-size="onPageSizeChange"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'action'">
						<slot name="action" :record="record"></slot>
					</template>
				</template>
			</a-table>
		</a-flex>
	</a-flex>
</template>

<script setup>
	import {reactive, computed, onMounted} from 'vue';
	import {settingStore} from '@/stores/setting';
	const $settingStore = settingStore();
	
	const emits = defineEmits(["onPageChange","onPageSizeChange"]);
	
	const props = defineProps({
		loading: {
			type: Boolean,
			default: false
		},
		dataGrid:{
			type:Array,
			default:[]
		},
		page:{
			type:Number,
			defualt:1
		},
		pageCount:{
			type:Number,
			defualt:1
		},
		pageSize:{
			type:Number,
			defualt:5
		},
		itemCount:{
			type:Number,
			defualt:1
		},
		columns:{
			type:Array,
			default:[]
		}
	});
	
	const data = reactive({
		//data: [],
		checkList:[],
		activeKey:['large'],
		tableSize:'large',
		striped: true,//是否斑马纹		
	});

	onMounted(()=>{
		data.checkList = props.columns.map((item)=> item.key);
		console.log("-> init DataCollection");
	});
	
	const cColumns = computed(() => {
		let arr = [];
		props.columns.forEach((item)=>{
			let key = data.checkList.filter(key => key==item.key)[0];
			if(key){
				arr.push(item);
			}
		});
		return arr;
	});
	
	const cPagination = computed(() => {
		let pagination = {
			page: props.page,
			pageSize: props.pageSize,
			showSizePicker: true,
			pageSizes: [10, 15, 20],
			pageCount:props.pageCount,
			itemCount:props.itemCount
		}
		return pagination;
	});
	
	const itemClick = function(item) {
		//console.log("itemClick=>" + JSON.stringify(item));
		data.tableSize = item.key;
	}
	
	const onChange = function(checkList) {
		data.checkList = checkList;
	}
	
	const onPageChange = function(page) {
		//console.log("onPageChange=>" + page);
		emits("onPageChange",page);
	}
	
	const onPageSizeChange = function(pageSize) {
		//console.log("onPageSizeChange=>" + pageSize);
		emits("onPageSizeChange",pageSize);
	}
	
</script>

<style scoped>
.ant-table-striped >>> .table-striped td {
	background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped >>> .table-stripedss td {
	background-color: rgb(29, 29, 29);
}
</style>